<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--进度条 process-->
<div class="progress">
    <!--aria-valuenow 只是为残疾人用的，没有什么用-->
    <div class="progress-bar " aria-valuenow="20"
         style="width:20%">
        40%
    </div>

</div>

<button type="button" id="btn" class="btn btn-primary">start</button>
<button type="button" id="stopmov" class="btn btn-info" disabled>stop</button>
<script type="text/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
    var stoprer;
    var num;
    function change() {
        var wid = $(".progress-bar").attr("aria-valuenow");
        num = parseInt(wid);
        num = num + 10
        $(".progress-bar").css("width", num + "%");
        $(".progress-bar").attr("aria-valuenow", num);
        $(".progress-bar").html(num + "%");
        if (num == 100) {
            clearInterval(stoprer)
        }
    }

    $("#btn").click(function () {
        $("#btn").attr("disabled", "disabled");
        $("#stopmov").removeAttr("disabled");
        stoprer = setInterval(change, 400);
    })



    $("#stopmov").click(function () {
        $(this).attr("disabled", "disabled");
        $("#btn").removeAttr("disabled");
        clearInterval(stoprer);
    })

</script>
</body>
</html>